<template>
  <div>
    <Top title="修改密码" iconShow="1"></Top>
    <div class="modify">
      <div class="modify-old">
        <input type="password" placeholder="请输入旧密码" v-model="postData.oldPassword" />
      </div>
      <div class="modify-new">
        <input type="password" placeholder="请输入6~16位字符密码" v-model="postData.newPassword" />
      </div>
      <div class="modify-again">
        <input type="password" placeholder="请再次输入密码" v-model="postData.newPasswordA" />
      </div>
      <mt-button type="primary" @click="modifyPassword">修改密码</mt-button>
      <p class="modify-forget">忘记密码？
        <a @click="findPassword">点击找回</a>
      </p>
    </div>
  </div>
</template>
<script>
import Top from '../components/Header'
import { Indicator } from 'mint-ui'
import { MessageBox } from 'mint-ui';
export default {
  name: 'login',
  data() {
    return {
      postData: {
        oldPassword: '',
        newPassword: '',
        newPasswordA: ''
      }
    }
  },
  components: { Top },
  mounted(){
    document.setTitle('修改密码');
  },
  methods: {
    modifyPassword() {
      // 首页登陆后session存的电话号码
      let phone = window.sessionStorage.getItem('tel');
      // 判断两次密码输入是否一致
      if (this.postData.newPassword != this.postData.newPasswordA) {
        MessageBox.alert('两次密码输入不一致~', '提示');
        return 
      } else if (!(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.postData.newPassword))) {
        MessageBox.alert('密码需由6~16位数字和英文组成~', '提示');
        return
      } else {
        // 修改密码穿参
        let postData = {
          oldPassword: this.postData.oldPassword,
          password: this.postData.newPassword,
          phone: phone
        }
        Indicator.open('加载中...')
        // 调用修改密码接口
        this.$http.post("/loansupermarket-app/login/updatePwd", postData)
          .then((response) => {
            setTimeout(function () {
              Indicator.close();
            }, 500)
            var resBody = response.body;
            // console.log(resBody)
            if (resBody.code == '000') {
              // 密码修改成功后，跳转到设置界面
              MessageBox.alert('密码修改成功').then(action => {
                // this.$router.push({ path: '/login' });
                this.$router.go(-1);
              });
            } else {
              MessageBox.alert(resBody.mesg,'提示')
            }
          })
      }
    },
    findPassword() {
      this.$router.push({ path: '/forgetpassword' })
    }
  }
}
</script>
<style lang="scss">
@import '../scss/variable/base.scss';
.modify {
  box-sizing: border-box;
  padding: 1.6rem 0.4rem;
  &-old,
  &-new,
  &-again {
    margin-top: 0.4rem;
    line-height: 1.33rem;
    text-align: left;
    width: 100%;
    height: 1.33rem;
    background: #fff;
    box-sizing: border-box;
    padding: 0 0.6rem;
    border-radius: 4px;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.05);
    input {
      width: 100%;
      height: 80%;
      line-height: 0.8rem;
      outline: none;
      border: none;
    }
  }
  .mint-button {
    width: 100%;
    height: 1.2rem;
    font-size: 0.42rem;
    margin-top: 1.06rem;
  }
  &-forget {
    margin-top: 0.6rem;
    font-size: 0.34rem;
    a {
      color: $primaryColor;
      text-decoration: underline;
    }
  }
}
</style>